<template>
  <div
    class="yl-legend-wrapper d-flex-c ai-c"
    v-show="visible"
  >
    <div class="m-b-mini f-14 d-flex-c ai-c jc-c">
      <span>单位</span>
      <span>（mm）</span>
    </div>
    <div
      v-for="(item, index) in list"
      :key="index"
      style="height: 40px;width: 15px;"
      :style="{ background: item.color }"
      class="position-relative"
    >
      <span style="position: absolute;right: -6px;transform: translate(100%, 10px);bottom: 0;">{{ item.text }}</span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'YlLegend',
  props: {
    list: {
      type: Array,
      default: () => ([])
    },
    value: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      visible: this.value
    }
  },
  watch: {
    value (v) {
      this.visible = v
    },
    visible (v) {
      this.$emit('input', v)
    }
  }
}
</script>
